<template>
  <div class="innerWrapper">
    <BreadCrumb />
    <div style="height:2vh;"></div>
    <el-tabs v-model="actived" @tab-click="handleTabsClick">
      <el-tab-pane label="工业APP" name="1"></el-tab-pane>
      <el-tab-pane label="工业微服务" name="2"></el-tab-pane>
      <el-tab-pane label="工业机理模型" name="3"></el-tab-pane>
    </el-tabs>
    <div class="tableWrapper">
      <el-table :data="pageData" style="width: 100%" stripe>
        <el-table-column prop="name" label="名称"></el-table-column>
        <el-table-column prop="nickname" label="发布人" width="180"></el-table-column>
        <el-table-column prop="createDate" width="180" label="发布时间"></el-table-column>
        <el-table-column label="操作" width="100">
          <template slot-scope="scope">
            <el-button @click="audit(scope.row)" type="text" size="small">审核</el-button>
          </template>
        </el-table-column>
      </el-table>
    </div>
    <div class="pagnationWrapper">
      <el-pagination
        style="text-align:center;margin-top:15px;"
        background
        layout="prev, pager, next"
        :total="pagnation.total"
        :page-size="pagnation.pageSize"
        :current-page.sync="pagnation.pageNum"
        @current-change="pageChange"
      ></el-pagination>
    </div>
    <el-dialog title="审核详情" :visible.sync="dialogVisible" width="50%">
      <el-form
        :label-position="labelPosition"
        :model="details"
        ref="auditForm"
        :rules="rules"
        label-width="80px"
      >
        <el-form-item label="名称">
          <span>{{details.name}}</span>
        </el-form-item>
        <el-form-item label="使用场景" v-if="actived !== '2'">
          <span>{{details.usePlace}}</span>
        </el-form-item>
        <template v-if="actived === '2'">
          <el-form-item label="接口地址">
            <span>{{details.apiUrl}}</span>
          </el-form-item>
          <el-form-item label="请求示例">
            <span>{{details.reqSample}}</span>
          </el-form-item>
        </template>
        <el-form-item label="简介">
          <span>{{details.description}}</span>
        </el-form-item>
        <el-form-item label="是否公开">
          <span>{{details.openFlag===0?'否':'是'}}</span>
        </el-form-item>
        <el-form-item label="联系方式">
          <span>{{details.contact}}</span>
        </el-form-item>
        <el-form-item label="发布人">
          <span>{{details.nickname}}</span>
        </el-form-item>
        <el-form-item label="发布时间">
          <span>{{details.createDate}}</span>
        </el-form-item>
        <el-form-item label="订阅数量">
          <span>{{details.subscriptions}}</span>
        </el-form-item>
        <el-form-item label="审核状态" prop="auditStatus">
          <el-select v-model="details.auditStatus" placeholder="请选择审核状态">
            <el-option label="通过" value="1"></el-option>
            <el-option label="不通过" value="2"></el-option>
          </el-select>
        </el-form-item>
        <el-form-item label="失败原因" prop="failReason" v-if="details.auditStatus === '2'">
          <el-input type="textarea" v-model="details.failReason" :autosize="{ minRows: 2 }">
          </el-input>
        </el-form-item>
      </el-form>
      <span slot="footer" class="dialog-footer">
        <el-button @click="dialogVisible = false">取 消</el-button>
        <el-button type="primary" @click="handleSubmit">确 定</el-button>
      </span>
    </el-dialog>
  </div>
</template>
<script>
import { mapActions, mapState } from 'vuex'
import BreadCrumb from '@/components/BreadCrumb'
export default {
  data() {
    return {
      actived: '1',
      dialogVisible: false,
      labelPosition: 'left',
      details: {
        failReason: '',
        auditStatus: ''
      },
      rules: {
        auditStatus: [
          { required: true, message: '请填写审核状态', trigger: 'change' }
        ],
        failReason: [
          { required: true, message: '请填写不通过原因', trigger: 'blur' },
          { max: 200, message: '不能超过200个字符', trigger: 'blur' }
        ]
      }
    }
  },
  computed: {
    ...mapState({
      pagnation: (state) => state.audit.pagnation,
      pageData: (state) => state.audit.pageData,
      tableTab: (state) => state.audit.tableTab
    })
  },
  watch: {
    tableTab() {
      this.$store.commit('audit/setPagnation', { pageNum: 1 })
      this.getList()
    }
  },
  created() {
    this.$store.commit('home/setCurrenttab', '')
    sessionStorage.removeItem('currentTab')
    this.actived = this.tableTab
    this.getList()
  },
  methods: {
    ...mapActions({
      pageChange: 'audit/getList',
      getList: 'audit/getList'
    }),
    audit(row) {
      this.dialogVisible = true
      this.details = row
    },
    handleSubmit() {
      this.$refs.auditForm.validate((valid) => {
        if (valid) {
          this.$store
            .dispatch('audit/audit', {
              id: this.details.id,
              status: this.details.auditStatus,
              failReason: this.details.failReason
            })
            .then((result) => {
              this.$message({
                message: result,
                type: 'success'
              })
              this.dialogVisible = false
              this.getList()
              this.$refs.auditForm.resetFields()
            })
            .catch((err) => {
              this.$message({
                message: err,
                type: 'err'
              })
            })
        }
      })
    },
    handleTabsClick(e) {
      this.$store.commit('audit/setTableTab', e.name)
    }
  },
  components: {
    BreadCrumb
  }
}
</script>
<style lang="scss" scoped>
.innerWrapper {
  width: 78vw;
  margin: 0 auto;
  .tableWrapper {
    /*height: 75vh;*/
  }
}
</style>
